<template>
  <div>

    <el-button type="danger" @click="batchDelete">批量删除</el-button>
  <el-tree
    ref="categoryTree"
    :data="data"
    :props="defaultProps"
    :expand-on-click-node="false"
    :default-expanded-keys="expandedKey"
    show-checkbox node-key="id"
    @node-click="handleNodeClick"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
  <el-button
    type="text" size="mini" @click="() => edit(data)">
Edit
</el-button>
<el-button
  v-if="node.level <= 2"
  type="text"
  size="mini" @click="() => append(data)">
Append
</el-button>
<el-button
  v-if="node.childNodes.length == 0"
  type="text" size="mini" @click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
  </el-tree>
  <el-dialog
    title="添加分类"
    :visible.sync="dialogVisible" width="30%" >
    <!-- 动态绑定 catagory 数据对象, catagory 在数据池定义-->
    <el-form :model="category">
      <el-form-item label="分类名">
        <el-input v-model="category.name" autocomplete="off"></el-input>
      </el-form-item>
      <!-- 增加添加/修改需要的字段信息-->
      <el-form-item label="图标">
        <el-input v-model="category.icon" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="单位">
        <el-input v-model="category.proUnit" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
      <!-- 点击确定，触发 addCategory 方法-->
<el-button type="primary" @click="addOrUpdate">确 定</el-button>
</span>

  </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [],
      dialogType: "xx",
      dialogVisible: false,

      category: {
        name: "" ,
        parentId: 0,
        catLevel: 0,
        isShow: 1,
        sort: 0,
        proCount: 0,
        proUnit: "",
        icon: "",
        id: null
      },
      defaultProps: {
        children: "childrenCategories",
        label: "name"
      }
    };
  },
  methods: {
    batchDelete() {
      /**
       * 老韩解读 this.$refs.categoryTree.getCheckedNodes(leafOnly, includeHalfChecked)
       * 1. this.$refs.categoryTree : 代表 el-tree 控件
       * 2. getCheckedNodes(leafOnly, includeHalfChecked)
       * 2.1 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
       * 2.2 (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，
       默认值为 false 2. 是否包含半选节点，默认值为 false
       * 2.3 老师没有传入参数 , 等价getCheckedNodes(false, false), 即返回选中的分类节点(不包
       括半选的)
       * 2.4 半选就是某个分类的子分类, 只选择了部分，没有全选，是 - 符号
       */
      var checkedNodes = this.$refs.categoryTree.getCheckedNodes();
      console.log("被选中的分类元素= ", checkedNodes);
      var ids = [];
      var categoryNames = []; //收集分类名，给出提示
      for (var i = 0; i < checkedNodes.length; i++) {
        ids.push(checkedNodes[i].id);
        categoryNames.push(checkedNodes[i].name);
      }
      this.$confirm(`是否批量删除【${categoryNames}】菜单?`, "提示", {

        confirmButtonText: "确定", cancelButtonText: "取消", type: "warning"
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/commodity/category/delete'),
          // url: "http://localhost:9090/commodity/category/delete",
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          this.$message({
            message: "家居分类批量删除 OK", type: "success"
          });
//刷新分类列表
          this.getCategories();
        });
      }).catch(() => {
      });
    },
    addOrUpdate() {

      if (this.dialogType == "add") {
        this.addCategory();//真正添加
      }
      if (this.dialogType == "edit") {
//真正修改(到数据库)
        this.updateCategory();
      }
    },
    updateCategory() {
      /**
       * 老师解读
       * 1. this.category 已经绑定了要修改的最新数据
       * 2. var { id, name, icon, proUnit } = this.category 是对象解构写法, 当然你也可以分开写
       * 3. 这里我们只是发送了要修改的字段信息，没有发送的字段，
       * 在数据库不会被修改(保持原值, 可以通过后台 update 语句看)
       */

      var { id, name, icon, proUnit } = this.category;
      this.$http({
        url: this.$http.adornUrl('/commodity/category/update'),
        // url: "http://localhost:9090/commodity/category/update",
        method: "post",
        data: this.$http.adornData({ id, name, icon, proUnit },
          false)
      }).then(({ data }) => {

        this.$message({
          message: "分类修改成功", type: "success"
        });
//关闭对话框
        this.dialogVisible = false;
//刷新分类列表
        this.getCategories()
//设置需要默认展开的菜单, 因为要使用到 this.category.parentId,所以在 edit()
//方法绑定一下,否则是没有值的

        this.expandedKey = [this.category.parentId];
      });
    },
    edit(data) {
      this.dialogType = "edit";
      console.log("要修改的数据", data);
      this.dialogType = "edit";
      this.dialogVisible = true;

//发送请求, 到数据库获取当前分类的实时数据
      this.$http({
        url: this.$http.adornUrl(`http://localhost:9090/commodity/category/info/${data.id}`),
        // url: `http://localhost:9090/commodity/category/info/${data.id}`,
        method: "get"
      }).then(({data}) => {
//请求成功
        console.log("要回显的数据", data);
//将返回的 data 数据字段信息，分别绑定到 category 对象
        this.category.name = data.category.name;
        this.category.id = data.category.id;
        this.category.icon = data.category.icon;
        this.category.proUnit = data.category.proUnit;
//不修改的，可以不用绑定
this.category.parentId = data.category.parentId;
// this.category.catLevel = data.category.catLevel;
// this.category.sort = data.category.sort;
// this.category.isShow = data.category.isShow;
      });
    },
    addCategory () {
      this.$http({
        url: this.$http.adornUrl('/commodity/category/save'),
        // url: "http://localhost:9090/commodity/category/save",
        method: "post",
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        this.$message({
          message: "分类信息保存 OK",
          type: "success"
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新分类列表
        this.getCategories();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentId];
      });
    },

    append (data) {
      this.dialogType = "add";
      this.dialogVisible = true;
      this.category.parentId = data.id

      this.category.catLevel = data.catLevel * 1 + 1
      this.category.id = null
      this.category.name = ""
      this.category.icon = ""
      this.category.proUnit = ""
      this.category.proCount = 0
      this.category.sort = 0
      this.category.isShow = 1
    },

// 处理删除请求
    remove (node, data) {
      const ids = [data.id] // 要删除的 id，放入到一个数组

      // 确认删除
      this.$confirm(`是否删除【${data.name}】菜单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 确认删除
          this.$http({
            url: this.$http.adornUrl('/commodity/category/delete'),
            // url: 'http://localhost:9090/commodity/category/delete',
            method: 'post',
            data: ids // 如果不需要 adornData，直接传递 ids
          })
            .then(response => {
              // 删除成功
              this.$message({
                message: '菜单删除成功',
                type: 'success'
              })
              // 刷新分类列表
              this.getCategories()
              this.expandedKey = [node.parent.data.id]
            })
            .catch(error => {
              // 处理删除失败的情况
              console.error('删除失败:', error)
              this.$message({
                message: '菜单删除失败',
                type: 'error'
              })
            })
        })
        .catch(() => {
          // 取消删除
          this.$message({
            message: '已取消删除',
            type: 'info'
          })
        })
    },
    getCategories () {
      this.$http({
        url: this.$http.adornUrl('/commodity/category/list/tree'),
        // url: 'http://localhost:9090/commodity/category/list/tree',
        method: 'get'
      }).then(({ data }) => {
        console.log('返回的 data 数据= ', data)
        this.data = data.data
      })
    },
    handleNodeClick (data) {
      console.log(data)
    }
  },
  created () {
    this.getCategories()
  }
}
</script>

<style scoped>
</style>
